<template>
  <view class="container">
    <swiper
      class="swiper-box"
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      circular="true"
      previous-margin="20px"
      next-margin="20px"
    >
      <swiper-item v-for="(item, index) in carouselImgInfo" :key="index">
        <view :class="item.colorClass" class="swiper-item">
          <image class="image" :src="item.url" mode="aspectFill" />
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps<{
  carouselImgInfo: any //轮播图像信息 colorClass、url、content
  indicatorDots: boolean //是否显示面板指示点
  autoplay: boolean //是否自动播放
  interval: number //切换的间隔时间
  duration: number //滑动动画时长
}>()
</script>
<style lang="scss">
.container {
  background-color: #eee;
  .swiper-box {
    /* width: 95%; */
    height: 200px;

    .swiper-item {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      color: #fff;
      margin: 10px;
      border-radius: 15upx;
      /* app上运行不显示图片，就需要加下面这行，设置高度 */
      height: 380upx;

      .image {
        /* width: 750rpx; */
        height: 380upx;
        border-radius: 15upx;
      }
    }
  }
}
</style>
